<jsp:root version="1.2" xmlns:jsp="http://java.sun.com/JSP/Page" 
          xmlns:display="urn:jsptld:http://displaytag.sf.net"
          xmlns:c="http://java.sun.com/jsp/jstl/core">



    <jsp:directive.page contentType="text/html; charset=UTF-8" />

    <script>
        $(document).ready(function() {
            var jsonsObjects = ${_jsonObject}
            if(jsonsObjects.elements.length != 0) {
                jsonUpdate(jsonsObjects)
            }
        })

        hideOverlay();


        $('#bundleOwnersBtn').live('click', function() {
            openDialog("openBundleOwner", "datasetViewer.jsp", 600, 800, "Dataset Viewer Dialog")
            return false;
        });

        $('#filterBtn').live('click', function() {
            openDialog('doFilter','filter.jsp', 600, 800, 'Filter Dialog')
            return false;
        })

        $('#printSaveBtn').live('click',function() {
            ajaxBind('printSave',  {key1: 'value1'}, 'text',function(msg){

                alert('Print/Save success!!! ' + msg)

            },null,null, null)

            return false;
        })

        $('#printSaveId').live('change', function() {
            
            ajaxBind(
            'onPrintSaveSelect',

            {printSaveOption:$('#printSaveId :selected').text()},
            
            'json',
            function(jsons){

                jsonUpdate(jsons)

            },null,null, null)
            
            return false;
        })

        function jsonUpdate(jsons) {
            var json;
            for(json in jsons.elements) {
                json = jsons.elements[json]

                var e = document.getElementById(json.id);

                if(json.va != undefined) {
                    e.value = json.va;
                }

                if(json.inn != undefined) {
                    e.innerHTML = json.inn;
                }

                if(json.di != undefined) {
                    e.disabled = json.di == 'true';
                }

                if(json.vi != undefined) {
                    e.style.display = (json.vi == 'true') ? '' : 'none';
                }

                if(json.cl != undefined) {
                    e.setAttribute("class", json.cl)
                }

                if(json.st != undefined) {
                    e.setAttribute("style", json.st)
                }

                if(json.ch != undefined) {
                    if(json.ch == 'true') {
                        e.setAttribute("checked", json.ch)

                    }   else {
                        e.removeAttribute("checked")
                    }
                }
            }
        }


    </script>

    <c:choose>
        <c:when test="${param.tab == 1}">
            Base Model / Product Name for Dataset / Product ID
        </c:when>
        <c:when test="${param.tab == 2}">
            Equipment for Dataset / Product ID
        </c:when>
        <c:when test="${param.tab == 3}">
            Flag Markers for Dataset / Product ID
        </c:when>
        <c:when test="${param.tab == 4}">
            ID Points for Dataset / Product ID
        </c:when>
        <c:otherwise>
            Detail Wkspc for Dataset / Product ID
        </c:otherwise>
    </c:choose>


   

    flowScope  ${flowScope.flowScopeData}

    Selected Print/Save option: <input id="seletedPrintSave" type="text" /> <br/>
    Previous selected Print/Save option: <input id="seletedPrintSavePre" type="text" />

    <table width="100%" cellspacing="0" cellpadding="0" border="0" summary="">
        <tr id="totalRowMsg">
            22 rows unfiltered
        </tr>
    </table>

    <table width="100%" style="background: #F7F7E7;" cellspacing="0" cellpadding="0" border="0" summary="">
        <tr>
            <td>
                <span style="font: menu; font-weight:bold; font-size: 10pt; color: #336699;" >
                    Select and click
                </span>
                <input id="bundleOwnersBtn" type="button" value="Bundle Owners"/>
            </td>
            <td>
                <input type="button" id="filterBtn" value="Filter"/>
                <input type="button"  value="Sort"/>
            </td>
            <td>
                <select id="printSaveId" name="">
                    <option value="0" selected="selected">CSV</option>
                    <option value="1">PDF Landscape</option>
                    <option value="2">PDF Portrait</option>
                    <option value="3">TEXT</option>
                </select>
                <input type="button" id="printSaveBtn"  value="Print/Save"/>
            </td>
            <td width="50%">
                CSV<input id="psCSV" type="checkbox" value="CSV"/>
                PDF Landscape<input id="psPDFLandscape" type="checkbox" value="PDF Landscape"/>
                PDF Portrait<input id="psPDFPortrait" type="checkbox" value="PDF Portrait"/>
                TEXT<input type="checkbox" id="psTEXT" value="TEXT"/>
            </td>
        </tr>
    </table>

    <c:if test="${param.tab == 1}">

        <script type="text/javascript">
            $(function() {

                $('#countryCB').click(function() {
                    $( "td:nth-child(2),th:nth-child(2)").toggle();
                });

                $('#languageCB').click(function() {
                    $('td:nth-child(3),th:nth-child(3)').toggle();
                });

                $('#displayNameCB').click(function() {
                    $('td:nth-child(4),th:nth-child(4)').toggle();
                });
            });

        </script>


        <table width="100%">
            <tr>
                <td><input id="countryCB" class="cb1" type="checkbox"/>country</td>
                <td><input id="displayCountryCB" type="checkbox"/>displayCountry</td>
                <td><input id="languageCB" type="checkbox"/>language</td>
            </tr>
        </table>

        <display:table id="table${param.tab}" list="${flowScope.localeList}"  class="report table1" decorator="RadioBtnDecorator" >
            <display:column property="select"  style="width: 40px"/>
            <display:column property="country" title="AAAA"/>
            <display:column property="displayCountry"/>
            <display:column property="language"/>
        </display:table>
    </c:if>

    <c:if test="${param.tab == 2}" >
        <display:table id="table${param.tab}" list="${flowScope.localeList}" class="report"/>
    </c:if>

    <c:if test="${param.tab == 3}">
        <display:table list="${flowScope.localeList}" id="table${param.tab}" />
    </c:if>

    <c:if test="${param.tab == 4}">
        <display:table list="${flowScope.localeList}" id="table${param.tab}" />
    </c:if>

    <c:if test="${param.tab == 5}">
        <display:table list="${flowScope.localeList}" id="table${param.tab}" />
    </c:if>

    <input type="hidden" value="${param.tab}" id="curentTab"/>


</jsp:root>
